<template>
    <div class="login">
        <div class="loginImg">
            <img src="/imgs/re/house.jpeg" alt="">
        </div>
        <div class="loginTitle">
            马术等级考试系统
        </div>
        <div class="rowEditor">
            <el-input v-model="userCode" placeholder="请输入用户名"></el-input>
            <i class="fa fa-user-circle"></i>
        </div>
        <div class="rowEditor">
            <el-input v-model="userPwd" type="password" placeholder="请输入密码"></el-input>
            <i class="fa fa-lock"></i>
        </div>
        <div class="submit">
            <el-button type = "text">忘记密码</el-button>            
            <el-button type = "text">注册账号</el-button>  
            <el-button  type="primary" @click="checkLogin">登录系统</el-button>          
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                console.log('login is load...');
                var comm = me.comm;
                console.log(comm);
            }
            catch(er){
                console.log(er);
            }
        },
        data() {
            return {
                userCode: '',
                userPwd:""
            };
        },
        methods: {
            checkLogin() {
                var me = this;
                try{ 
                    var ps ={
                        userCode : me.userCode,
                        pwd : me.userPwd
                    };
                    var key = "re/checkLogin";
                    me.comm.query( key , ps ).then(res=>{
                        console.log(res);  
                        if( res && res!=null && res.length>0){
                            var userInfo = res[0];
                            var sessionKey = "reUserInfo";
                            window.sessionStorage.setItem(sessionKey , JSON.stringify(userInfo));
                            var opts ={
                                path:"/ReMain" ,
                                query:{
                                    uid: userInfo.userId
                                }
                            };
                            me.$router.push(opts);
                        }
                        else{
                            me.$message.error('错了哦，请检查用户名密码！');
                        }
                    });

                }
                catch(er){
                    console.log(er);
                }
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .login{
        background-color: #fff;
        box-shadow: 0 0 10px #999;
        width: 320px; 
        padding: 20px;
        position: fixed;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        .loginImg{
            padding: 40px 0px;

            img{
                height: 100px;
                width: 100px;
                border-radius: 50%;
            }
        }
        .loginTitle{
            font-weight: bold;
            font-size: 1.5em;
            margin-bottom: 15px;
        }

        .rowEditor{
            position: relative;
            margin-bottom: 10px;
            i{
                position: absolute;
                left: 15px;
                top: 13px;
            }
            ::v-deep .el-input__inner{
                padding-left: 36px
            }
        }

        .submit{
            padding: 25px 0;
            display: flex;
            justify-content: space-between;
        }
    }
</style>